<template>
  <div class="login-page">
    <section class="login-container">
      <!-- 登录 -->
      <login-login v-show="isLogin" class="login-component" style="--custom-input-color: #77c9d0c2">
        <template #footer>
          <div class="login-link">
            <login-link @click="change">注册账号</login-link>
            <login-link>忘记密码</login-link>
            <a href="http://beian.miit.gov.cn/" target="_blank" class="beian"> 备案号：蜀ICP备2024103894号-1 </a>
          </div>
        </template>
      </login-login>
      <!-- 注册 -->
      <login-register v-show="!isLogin" class="login-component" style="--custom-input-color: #f79b5c">
        <template #top>
          <div class="text-[#f79b5c] text-[1rem] cursor-pointer">
            <i class="fas fa-circle-arrow-left" @click="change"></i>
          </div>
        </template>
      </login-register>
    </section>
  </div>
</template>

<script setup lang="ts">
const isLogin = ref(true);

function change() {
  isLogin.value = !isLogin.value;
}
</script>

<style scoped lang="scss">
.login-page {
  @apply h-screen bg-slate-300;
  .login-container {
    @apply flex items-center justify-center;
  }
}
.login-component {
  @apply scale-100 translate-y-32;
  .login-link {
    @apply grid grid-cols-5;
  }
  .beian {
    @apply inline-block w-80 text-[12px] text-gray-300 scale-[0.5];
  }
}
@media (min-width: 768px) {
  .login-component {
    @apply translate-y-64 scale-[2];
  }
}
</style>
